
body{
    background:#000000}

#navigation ul {
 margin:0;
 padding:0;
 list-style-type:none;
 text-align:right;
 margin-right: 100px;
 }

#navigation li {
 float:left;
 margin:auto;
 padding:0;
 background-color:#000;
 }

#navigation li a {
 display:block;
 width:120px;
 color:white;
 border-width:thick;
 border-color:#FFF;
 text-decoration:none;
 padding:5px;
 }

#navigation li a:hover {
 background-color:#FF0000;
 }



#navigation ul li ul {
 display:none;
 }


#navigation ul li:hover ul {
 display:block;
 }

#navigation li:hover ul li {
 float:none;
 }

#navigation li ul {
 position:absolute;
 }

p{
    color:#FFFFFF}
 .bgbox
        {
           
             width:100%;
           
             left:0px;
             top:0px;
             text-align:center;
            }
#sliders{ 
align:center;
border-radius: 5px; 
box-shadow: 1px 1px 4px #666; 
padding: 1%; 
background: #fff; 
} 
#overflow{ 
width: 100%; 
overflow: hidden; 
} 
#sliders .inner{ 
width: 500%; 
transiton: all 1s linear; 
-webkit-transition: all 1s linear; 
} 
#sliders article{ 
float: left; 
width: 20%; 
} 
#sliders article .info{ 
position: absolute; 
opacity: 0; 
padding: 30px; 
color: #666; 
font-family: Arial; 
transition: opacity 0.1s ease-out; 
-webkit-transform: translateZ(0); 
-webkit-transition: opacity 0.1s ease-out; 
} 
#sliders article .info h1{ 
align:center;
font-size: 22px; 
font-weight: bold; 
margin: 0 0 5px; 
} 
#sliders article .info a{ 
color: #FFFFFF; 
text-decoration: none; 
align:center;
} 
/* module: controls */ 
#controls{ 
height: 50px; 
width: 100%; 
margin-top: -25%; 
} 
#controls label{ 
display: none; 
width: 50px; 
height: 50px; 
opacity: 0.3; 
cursor: pointer; 
} 
#controls label:hover{ 
opacity: 1; 
} 
/* module: active */ 
#active{ 
width: 100%; 
margin-top: 23%; 
text-align: center; 
} 
#active label{ 
display: inline-block; 
width: 10px; 
height: 10px; 
border-radius: 5px; 
background: #bbb; 
border-color: #777; 
} 
#active label:hover{ 
background: #ccc; 
} 
/* input checked change style */ 
#slider1:checked ~ #active label:nth-child(1), 
#slider2:checked ~ #active label:nth-child(2), 
#slider3:checked ~ #active label:nth-child(3), 
#slider4:checked ~ #active label:nth-child(4), 
#slider5:checked ~ #active label:nth-child(5){ 
background: #333; 
} 
#slider1:checked ~ #controls label:nth-child(5), 
#slider2:checked ~ #controls label:nth-child(1), 
#slider3:checked ~ #controls label:nth-child(2), 
#slider4:checked ~ #controls label:nth-child(3), 
#slider5:checked ~ #controls label:nth-child(4){ 
display: block; 
float: left; 
background: url(../img/prev.png) no-repeat; 
margin-left: -70px; 
} 
#slider1:checked ~ #controls label:nth-child(2), 
#slider2:checked ~ #controls label:nth-child(3), 
#slider3:checked ~ #controls label:nth-child(4), 
#slider4:checked ~ #controls label:nth-child(5), 
#slider5:checked ~ #controls label:nth-child(1){ 
display: block; 
float: right; 
background: url(../img/next.png) no-repeat; 
margin-right: -70px; 
} 
#slider1:checked ~ #sliders article:nth-child(1) .info, 
#slider2:checked ~ #sliders article:nth-child(2) .info, 
#slider3:checked ~ #sliders article:nth-child(3) .info, 
#slider4:checked ~ #sliders article:nth-child(4) .info, 
#slider5:checked ~ #sliders article:nth-child(5) .info{ 
opacity: 1; 
transition: all 0.6s ease-out 1s; 
-webkit-transition: all 0.6s ease-out 1s; 
} 
#slider1:checked ~ #sliders .inner{ 
margin-left: 0; 
} 
#slider2:checked ~ #sliders .inner{ 
margin-left: -100%; 
} 
#slider3:checked ~ #sliders .inner{ 
margin-left: -200%; 
} 
#slider4:checked ~ #sliders .inner{ 
margin-left: -300%; 
} 
#slider5:checked ~ #sliders .inner{ 
margin-left: -400%; 
} 